<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery通过POST的方式实现ajax</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            采用通用方式实现ajax
         */
        window.onload = function () {
            // 1.为姓名绑定失去焦点事件
            $("#username").blur(function () {
                let username = $("#username").val();
                // 2.jQuery的POST方式实现AJAX
               $.ajax({
                   // 请求资源路径
                   url:"userServlet",
                   // 是否异步,默认true
                   async:true,
                   // 请求参数
                   data:"username="+username,
                   // 请求的方式,默认get方式
                   type:"GET",
                   // 返回响应数据形式:xml、html、js、json、text等
                   dataType:"text",
                   // 响应成功的回调函数
                   success:function (data) {
                       // 将响应的数据显示到span标签
                       $("#uSpan").html(data);
                   },
                   // 请求失败后调用的回调函数（请求路径错误等）
                   error:function () {
                       alert("操作失败...");
                   }
               });
            });
        }
    </script>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan"></span>
    <br>
    密码：<input type="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>
</body>
</html>